const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const EslintWebpackPlugin = require("eslint-webpack-plugin");
const TerserWebpackPlugin = require("terser-webpack-plugin");
const CSSMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
  mode:"development",//设置为开发模式
  optimization:{//优化选项
    minimize:false,//要启用压缩，最小化
    minimizer:[//指定压缩的工具
      new TerserWebpackPlugin({
        terserOptions:{
          compress:{//指定压缩选项
            drop_console:true//表示要删除所有的console.log语句
          }
        }
      }),
      new CSSMinimizerWebpackPlugin()//启用CSS压缩
    ]
  },
  devtool:"source-map",//关闭sourcemap
  entry:{//entry的值如果是一个字符串,它其实是一种简写,真正的写法 main:./src/index.js
   app:'./src/app.js',
   about:'./src/about.js',
   contact:'./src/contact.js'
  },//指定输入的文件，打包的入口
  output:{//输出配置
    path:path.resolve("dist"),//指定打包后输出的文件目录
    filename:"[name].[fullhash:5].js",//输出的文件名
    clean:true,//每一次新的打包要清除老的目录
  },
  devServer:{
    port:8080,
    compress:true,//当服务器向客户端发送文件的时候先压缩再发送
    static:{
      directory:path.resolve("public")
    },
    //监听src目录下任意子目录中的任意文件名的html文件的变化 glob
    watchFiles: ["src/**/*.html"],
    open:true,// 在打包完成后，自动打开浏览器并预览 我们页面
    proxy:{//配置一个代理
      //当访问webpack-dev-server的时候，判断如果请求的路径是以/api开头的话，就会把请求代理到3000上
      '/api':{
        target:'http://localhost:3000',
        //The origin of the host header is kept when proxying by default, you can set changeOrigin to true to override this behaviour.
        //用于修改原始主机头为目标URL
        //原来原始主机号host,就会变成目标URL
        //changeOrigin:false
        //host: 'localhost:8080'
        //changeOrigin:true
        //host: 'localhost:3000'
        changeOrigin:true,//改变来源
        pathRewrite:{//在转发或者说代理请求的时候，把开头的/api替换成空，也就是/api/user=>/users
          "^/api":""
        }
      }
    }
  },
  module:{
    rules:[//解析规则数组中放置很多规则的对象
      {
        test:/\.js$/,
        //表示要转换Js的时候不要转换node_modules下面的第三方模块
        exclude:/node_modules/,
        use:[
          {
            loader:"babel-loader",
            options:{
              plugins:[
                //"@babel/plugin-transform-arrow-functions"
              ],
              presets:[
                [
                  "@babel/preset-env",
                  {
                    //这个usage表示只转换用到的API,
                    //useBuiltIns:"usage",
                    //腻子是用来抹平差异的
                    //corejs:3 //你现在要提供Promise的自已的实现,指定腻子库的版本
                  }
                ]
              ]
            }
          }
        ]
      },
      {
        test:/\.css$/,//此处放置正则表达式，用来匹配模块文件名
        use:[//使用两个loader来进行处理,loader处理可能是多次进行的，需要多次的翻译
          //执行的顺序是自下而上的，或者说自右向左的，反正就从后向前执行
          //因为loader的设计有一个原则就是单一原则 
          //中 中=>英  英=>西班牙文  西班牙文
          {loader:MiniCssExtractPlugin.loader},//负责把CSS内容转成style标签并且插入页面
          {loader:"css-loader"},//负责 读取CSS文件内容
          {
            loader:"postcss-loader",//CSS预处理器,只是可以用来处理CSS
            options:{
              postcssOptions:{
                plugins:[
                  [
                    "autoprefixer",//真正添加前缀靠的是插件来添加的前缀
                    {//要添加哪些浏览器厂商前缀
                      overrideBrowserslist:[
                        "> 1%",//给那些市场占用率大于1%的浏览器添加厂商前缀
                        "last 2 versions"//最近的2个版本
                      ]
                    }
                  ]
                ]
              }
            }
          }
        ]
      },
      {//再配置一个模块的加载规则 
        test:/\.less$/,//如果加载的模块是以.less结尾的话
        use:[
          {loader:MiniCssExtractPlugin.loader},//把CSS内容转化成style标签并且插入页面
          {loader:"css-loader"},//转换css
          {loader:"less-loader"}//先把less编译成css
        ]
      },
      {//再配置一个模块的加载规则 
        test:/\.s(a|c)ss$/,//如果加载的模块是以.sass结尾的话
        use:[
          {loader:MiniCssExtractPlugin.loader},//把CSS内容转化成style标签并且插入页面
          {loader:"css-loader"},//转换css
          {loader:"sass-loader"}//先把sass编译成css
        ]
      },
      {
        test:/\.(jpg|png|gif|bmp|svg)$/,
        //type:'asset',
        //type:'asset/resource'//一定会生成新的图片
        //type:'asset/inline'//把图片内容转一个字符串内联在JS
        type:"asset",
        parser: {//是否转成base64字符串的条件
          //如果图片的尺寸大于maxSize,就是生成新的图片,否则就内联
          dataUrlCondition: {
            maxSize: 64 * 1024 // 4kb
          }
        }
      }
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      //我以src/index.html为模块，只插入app这个入口生成的文件
      template:"./src/index.html",
      filename:'app.html',
      chunks:['app']//第个入口会生成一个代码块chunk
    }),
    new HtmlWebpackPlugin({
      template:"./src/index.html",
      filename:'about.html',
      chunks:['about']
    }),
    new HtmlWebpackPlugin({
      template:"./src/index.html",
      filename:'contact.html',
      chunks:['contact']
    }),
    new MiniCssExtractPlugin({
      filename:"[name].[fullhash:5].css"
    }),
    new EslintWebpackPlugin({
      extensions:["js","jsx"],
      fix:true
    })
  ]
}